<template>
  <div class="subjectDetail">
    <Load v-if="isLoad" />

    <el-card class="el-card" v-else>
      <el-divider>
        {{
          subjectInfo.subjectType == 1
            ? "单选题"
            : subjectInfo.subjectType == 2
            ? "多选题"
            : subjectInfo.subjectType == 3
            ? "判断题"
            : "简答题"
        }}
      </el-divider>

      <!-- 标题-标签 -->
      <div class="wrapper">
        <div class="question">
          {{ subjectInfo.subjectName }}
        </div>
        <div class="label">
          <el-tag
            v-for="(item, index) in subjectInfo.labelName"
            :key="index"
            style="margin-left: 10px"
            size="small"
          >
            {{ item }}
          </el-tag>
        </div>
      </div>

      <el-divider border-style="dashed" />

      <font style="color: #3c6eeecc; font-size: 14px; cursor: pointer"
        >参考答案</font
      >

      <!-- 答案 -->
      <div class="answer" ref="answerRef" style="margin-top: 20px">
        <div class="aie-container">
          <div class="aie-container-header"></div>
          <div class="aie-container-main"></div>
          <div class="aie-container-footer" style="display: none"></div>
        </div>
      </div>

      <el-divider border-style="dashed" />

      <!-- 快速刷题 -->
      <div class="quickly">
        <div
          class="last"
          v-if="subjectInfo.lastSubjectId"
          @click="changeSubject(subjectInfo.lastSubjectId)"
        >
          <button class="btn-donate">上一题</button>
        </div>
        <div
          class="next"
          v-if="subjectInfo.nextSubjectId"
          @click="changeSubject(subjectInfo.nextSubjectId)"
        >
          <button class="btn-donate">下一题</button>
        </div>
      </div>

      <div class="handler">
        <div class="like" @click="handlerLike">
          <svg
            t="1706437401062"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5765"
            width="18"
            height="18"
            v-if="!subjectInfo.like"
          >
            <path
              d="M844.231111 391.39555600000006H659.9111109999999c-13.653333-2.275556-18.204444-15.928889-20.48-22.755556V202.52444400000002c0-45.511111-36.408889-81.92-81.92-81.92-40.96 0-75.093333 31.857778-81.92 70.542223-25.031111 157.013333-120.604444 209.351111-182.044444 225.28 2.275556 6.826667 2.275556 11.377778 2.275555 15.928889v441.457777c0 9.102222-2.275556 18.204444-6.826666 27.306666999999997h446.008888c43.235556-9.102222 72.817778-25.031111 93.297778-68.266667l93.297778-327.68c18.204444-59.16444400000001-11.377778-116.053333-77.368889-113.77777699999999zM257.137778 876.0888889999999V432.355556c0-13.653333-18.204444-25.031111-38.684445-25.031112H157.013333c-31.857778 0-59.16444400000001 27.306666999999997-59.16444400000001 59.16444500000001v373.191111c0 34.133333 25.031111 61.44 59.16444400000001 61.44h61.44c20.48 0 38.684444-11.377778 38.684445-25.031111z m0 0"
              fill="#707070"
              p-id="5766"
            ></path>
          </svg>
          <svg
            t="1710673200820"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6007"
            width="18"
            height="18"
            v-else
          >
            <path
              d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z"
              p-id="6008"
              fill="#d81e06"
            ></path>
          </svg>
          <span>{{ subjectInfo.likeCount }}</span>
        </div>
        <div class="collect" @click="ElMessage.info('敬请期待')">
          <svg
            t="1706437544540"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6923"
            width="15"
            height="15"
          >
            <path
              d="M768 43.248941c-106.616471 0-192.572235 58.940235-256.993882 135.529412-62.584471-79.209412-148.329412-135.529412-255.006118-135.529412-150.226824 0-256 129.174588-256 270.004706 0 75.565176 30.960941 129.957647 64.843294 181.097412 541.123765 648.764235 352.316235 648.402824 894.313412 0C999.062588 443.211294 1024 388.788706 1024 313.253647c0-140.830118-105.743059-270.004706-256-270.004706z"
              fill="#707070"
              p-id="6924"
            ></path>
          </svg>
          <span>0</span>
        </div>
        <div class="fail" @click="ElMessage.info('敬请期待')">
          <el-icon style="color: rgb(209, 5, 5)"><InfoFilled /></el-icon>
          <span>纠错</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { querySubjectInfo } from "@/api/subject/subject";
import { ElMessage } from "element-plus";
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css";
import Load from "@/components/Load.vue";

let $route = useRoute();

const isLoad = ref(true);

// 题目信息
const subjectInfo = ref({});

const answerRef = ref();

onMounted(() => {
  // 初始化题目信息
  getSubjectInfo();
});

// 获取题目信息
const getSubjectInfo = () => {
  const entity = {
    id: $route.query.id, // 题目Id
    categoryId: $route.query.categoryId, // 二级分类Id
    labelId: $route.query.labelId, // 三级标签Id
  };

  querySubjectInfo(entity).then((res) => {
    if (res.code == 200) {
      subjectInfo.value = res.data;
      isLoad.value = false;
      setTimeout(() => {
        new AiEditor({
          element: answerRef.value,
          placeholder: "点击输入内容...",
          content: subjectInfo.value.subjectAnswer,
          editable: false, // 是否可编辑
          toolbarKeys: [], // 不显示工具栏
          theme: "light", // 主题颜色 dark  light
        });
      }, 0);
    }
  });
};

// 更换题目
const changeSubject = (id) => {
  window.open(
    "/#/subjectDetail?id=" +
      id +
      "&categoryId=" +
      $route.query.categoryId +
      "&labelId=" +
      $route.query.labelId
  );
};


// 用户点赞
const handlerLike = () => {
  ElMessage.info("敬请期待");
  let entity = {};
  entity.subjectId = subjectInfo.id;
  if (subjectInfo.value.like) {
    // 当前为已点赞状态
    entity.status = 0;
  } else {
    entity.status = 1;
  }
};
</script>

<style scoped lang="scss">
.subjectDetail {
  width: 100%;
  min-height: calc(100vh - 55.33px);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  .el-card {
    width: 80%;
    overflow: scroll;
    .wrapper {
      width: 100%;
      color: #5e5e5e;
      font-size: 1.1em;
      font-weight: 500;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .handler {
      width: 100%;
      display: flex;
      align-items: center;
      .fail,
      .like,
      .collect {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin: 0 4px;
        span {
          margin: 0 5px;
          font-size: 15px;
        }
      }
    }
    .quickly {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .next {
        justify-content: end;
      }
      .last,
      .next {
        flex: 1;
        margin: 0 0 10px 0;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
        .btn-donate {
          --clr-font-main: hsla(0 0% 20% / 100);
          --btn-bg-1: rgb(81, 213, 253);
          --btn-bg-2: rgb(46, 125, 254);
          --btn-bg-color: rgb(255, 255, 255);
          --radii: 0.5em;
          cursor: pointer;
          padding: 0.1em 1.4em;
          min-width: 100px;
          min-height: 40px;
          font-size: var(--size, 1rem);
          font-family: "Segoe UI", system-ui, sans-serif;
          font-weight: 500;
          transition: 0.4s;
          background-size: 280% auto;
          background-image: linear-gradient(
            325deg,
            var(--btn-bg-2) 0%,
            var(--btn-bg-1) 55%,
            var(--btn-bg-2) 90%
          );
          border: none;
          border-radius: var(--radii);
          color: var(--btn-bg-color);
          box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5),
            0px 5px 5px -1px rgba(58, 125, 233, 0.25),
            inset 4px 4px 8px rgba(175, 230, 255, 0.5),
            inset -4px -4px 8px rgba(19, 95, 216, 0.35);
        }

        .btn-donate:hover {
          background-position: right top;
        }

        .btn-donate:is(:focus, :focus-visible, :active) {
          outline: none;
          box-shadow: 0 0 0 2px var(--btn-bg-color), 0 0 0 3px var(--btn-bg-2);
        }

        @media (prefers-reduced-motion: reduce) {
          .btn-donate {
            transition: linear;
          }
        }
      }
    }
  }
}
</style>